<template>
  <div class="sxpcwlkj-store_advertising-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="50vw" :close-on-click-modal="false">
      <el-form ref="deptDialogFormRef" :model="state.ruleForm" size="default" label-width="150px" >
        <el-form-item v-show="false" label="ID" prop="id">
          <el-input v-model="state.ruleForm.id" placeholder="ID"></el-input>
        </el-form-item>
        <el-form-item label="广告位ID" prop="advertisingLocationId">
          <el-select v-model="state.ruleForm.advertisingLocationId" placeholder="请选择">
            <el-option  v-for="item in advertisingLocationData" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告名称" prop="name">
          <el-input v-model="state.ruleForm.name" placeholder="广告名称"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" v-model="state.ruleForm.startTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" v-model="state.ruleForm.endTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="广告图" prop="image">
          <fast-img v-model="state.ruleForm.image" :imageUrl="state.ruleForm.image"  @update-imageUrl="onUrlimage" />
        </el-form-item>
        <el-form-item label="是否跳转" prop="isOpen">
          <fast-select v-model="state.ruleForm.isOpen" dict-type="SYS_IS" placeholder="是否跳转"></fast-select>
        </el-form-item>
        <el-form-item label="打开方式" prop="openWay">
          <fast-select v-model="state.ruleForm.openWay" dict-type="SYS_OPEN_TYPE" placeholder="打开方式"></fast-select>
        </el-form-item>
        <el-form-item label="路由地址" prop="openPath">
          <el-input v-model="state.ruleForm.openPath" placeholder="路由地址"></el-input>
        </el-form-item>
        <el-form-item label="路由参数" prop="routeParameter">
          <el-input type="textarea" v-model="state.ruleForm.routeParameter"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <fast-radio-group v-model="state.ruleForm.status" dict-type="SYS_STATE"></fast-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="state.ruleForm.sort" placeholder="排序"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="state.ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onCancel" size="default">取 消</el-button>
        <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="sxpcwlkjStore_advertisingDialog">
import {reactive, defineAsyncComponent, ref, onMounted} from 'vue';
// 引入组件
const  FastEditor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
import FastSelect from "/@/components/fast-select/src/fast-select.vue";
import FastRadioGroup from "/@/components/fast-radio-group/src/fast-radio-group.vue";
import FastImg from "/@/components/fast-upload/img.vue";
import FastImgs from "/@/components/fast-upload/imgs.vue";
import FastFile from "/@/components/fast-upload/file.vue";
import { store_advertisingApi } from '/@/api/sxpcwlkj/store_advertising';
import {store_advertising_locationApi} from "/@/api/sxpcwlkj/store_advertising_location";
import {ElMessage} from "element-plus";
const baseApi = store_advertisingApi();
const baseLocationApi = store_advertising_locationApi();
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const store_advertisingDialogFormRef = ref();

const state = reactive({
  ruleForm: {
    id: '',
    advertisingLocationId: '',
    name: '',
    startTime: '',
    endTime: '',
    image: '',
    isOpen: '',
    openWay: '',
    openPath: '',
    routeParameter: '',
    status: '',
    sort: '',
    revision: '',
    tenantId: '',
    createdBy: '',
    createdTime: '',
    updatedBy: '',
    updatedTime: '',
    remark: ''        },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
});
// 重置
const resetFomr = () => {
  state.ruleForm = {
    id: '',
    advertisingLocationId: '',
    name: '',
    startTime: '',
    endTime: '',
    image: '',
    isOpen: '',
    openWay: '',
    openPath: '',
    routeParameter: '',
    status: '',
    sort: '',
    revision: '',
    tenantId: '',
    createdBy: '',
    createdTime: '',
    updatedBy: '',
    updatedTime: '',
    remark: ''        }
}
const advertisingLocationData = ref([]);
const openDialog = (type: string, row: RowStore_advertisingType) => {
  resetFomr();
  state.dialog.isShowDialog = true;
  if (type === 'edit'){
    state.ruleForm = row;
    state.dialog.title = '修改';
    state.dialog.submitTxt = '修 改';
  }
  if (type === 'add') {
    state.dialog.title = '新增';
    state.dialog.submitTxt = '新 增';
  }
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  emit('refresh', state.ruleForm);
};
const onUrlimage=(data)=>{
  console.log(data);
  state.ruleForm.image = data;
}
onMounted(() => {
  baseLocationApi.list({pageSize:1000,pageNum:1}).then(res => {
    advertisingLocationData.value = res.rows;

  }).catch(async err => {
    ElMessage.warning(err);
  }).finally(() => {
  })
})
// 暴露变量
defineExpose({
  openDialog, closeDialog
});
</script>
